<template>
    <view class="tabs" :style="{ background: background }">
        <view
            v-for="(tab, index) in tabs"
            class="tab-item"
            :class="{ active: activeTabIndex == index }"
            @click="clickTab(tab, index)"
            :key="index">
            <text class="tab-item-text" v-if="tab.icon">
                <iconsfont :customIcons="tab.icon" size="32"></iconsfont>
            </text>
            <text class="tab-item-text" v-else>{{ tab.title }}</text>
            <view class="line"></view>
        </view>
        <view v-if="hasBbottom" class="b-line"></view>
    </view>
</template>

<script>
import { CHANGE_TAB_INDEX } from "@/store/mutation-type.js"
import { mapState, mapMutations } from "vuex"

export default {
    // hasBbottom 是否有下划线
    props: {
        tabs: {
            type: Array,
            default: () => [],
        },
        lineWidth: {
            type: String,
            default: "32rpx",
        },
        background: {
            type: String,
            default: "none",
        },
        hasBbottom: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        ...mapState("tabBar", ["activeTabIndex"]),
    },
    data() {
        return {}
    },
    methods: {
        ...mapMutations("tabBar", [CHANGE_TAB_INDEX]),
        clickTab(item, index) {
            this[CHANGE_TAB_INDEX](index)
            this.$emit("clickTab", index)
        },
    },
}
</script>

<style lang="scss">
.tabs {
    position: relative;
    display: flex;
    padding: 10rpx 10rpx 0;

    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        color: grey;
        font-size: $app-tab-text-size;
        font-weight: 500;
        height: 78rpx;
        box-sizing: border-box;
        position: relative;
        padding-bottom: 4rpx;

        .tab-item-text {
            display: flex;
            flex: 1;
            height: 70rpx;
            align-items: center;
            justify-content: center;
            padding: 0 10rpx 4rpx;
            font-weight: normal;
            font-size: $font-size-32;
            color: $app-color-text-desc;
        }

        .line {
            width: 32rpx;
            height: 8rpx;
            border-radius: 20rpx;
            background: rgba(0, 0, 0, 0);
        }

        &.active {
            .tab-item-text {
                color: $app-color-text-main;
                font-weight: bold;
            }

            .line {
                border-radius: 20rpx;
                background: $app-color-main-tms;
            }
        }
    }

    .b-line {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #ebebeb;
    }
}
</style>
